{% extends "base.html" %}

{% block title %}同步历史记录{% endblock %}

{% block content %}
<div class="container">
    <div class="toolbar">
        <h2>同步历史记录</h2>
        <div>
            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回仪表盘
            </a>
            <button class="btn btn-primary refresh-btn" onclick="refreshHistory()">
                <i class="bi bi-arrow-clockwise"></i> 刷新
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-clock-history"></i> 同步活动记录</h5>
                <div class="filter-controls">
                    <select class="form-select form-select-sm" id="dirFilter" onchange="updateFilters()">
                        <option value="">所有目录</option>
                        {% for dir in sync_dirs %}
                        <option value="{{ dir.local_path }}">{{ dir.local_path }}</option>
                        {% endfor %}
                    </select>
                    <select class="form-select form-select-sm" id="operationFilter" onchange="updateFilters()">
                        <option value="">所有操作</option>
                        <option value="create">创建文件</option>
                        <option value="create_dir">创建目录</option>
                        <option value="delete">删除文件</option>
                        <option value="delete_dir">删除目录</option>
                        <option value="modify">修改</option>
                        <option value="move">移动文件</option>
                        <option value="move_dir">移动目录</option>
                    </select>
                    <select class="form-select form-select-sm" id="directionFilter" onchange="updateFilters()">
                        <option value="">所有方向</option>
                        <option value="local_to_server">上传</option>
                        <option value="server_to_local">下载</option>
                    </select>
                    <input type="text" class="form-control form-control-sm" id="fileFilter" placeholder="搜索文件名..." oninput="updateFilters()">
                    <button class="btn btn-secondary btn-sm" onclick="resetFilters()">
                        <i class="bi bi-arrow-clockwise"></i> 重置
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if sync_history %}
                {% for dir_group in sync_history|groupby('local_path') %}
                <div class="history-group" data-dir-path="{{ dir_group.grouper }}">
                    <div class="history-group-header">
                        <h6><i class="bi bi-folder"></i> {{ dir_group.grouper }}</h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>文件</th>
                                    <th>操作</th>
                                    <th>方向</th>
                                    <th>路径</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in dir_group.list %}
                                <tr>
                                    <td>{{ item.timestamp }}</td>
                                    <td class="truncate-text" title="{{ item.filename }}">{{ item.filename }}</td>
                                    <td>
                                        <span class="badge {% if item.operation == 'create' or item.operation == 'create_dir' %}bg-success
                                                     {% elif item.operation == 'delete' or item.operation == 'delete_dir' %}bg-danger
                                                     {% elif item.operation == 'modify' %}bg-warning
                                                     {% elif item.operation == 'move' or item.operation == 'move_dir' %}bg-info
                                                     {% else %}bg-secondary{% endif %}">
                                            {{ item.operation }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge {% if item.direction == 'local_to_server' %}bg-primary{% else %}bg-info{% endif %}">
                                            {{ '上传' if item.direction == 'local_to_server' else '下载' }}
                                        </span>
                                    </td>
                                    <td class="truncate-text" title="{{ item.path }}">{{ item.path }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endfor %}
            {% else %}
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="bi bi-clock"></i>
                </div>
                <h3>暂无同步历史</h3>
                <p>同步操作后将在此处显示历史记录。</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function refreshHistory() {
    location.reload();
}

function resetFilters() {
    document.getElementById('dirFilter').value = '';
    document.getElementById('operationFilter').value = '';
    document.getElementById('directionFilter').value = '';
    document.getElementById('fileFilter').value = '';
    updateFilters();
}

function updateFilters() {
    const dirFilter = document.getElementById('dirFilter').value;
    const operationFilter = document.getElementById('operationFilter').value;
    const directionFilter = document.getElementById('directionFilter').value;
    const fileFilter = document.getElementById('fileFilter').value.toLowerCase();
    
    // 获取所有历史记录组
    const groups = document.querySelectorAll('.history-group');
    
    groups.forEach(group => {
        let groupVisible = false;
        const rows = group.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            let show = true;
            
            // 应用目录过滤
            if (dirFilter) {
                const dirPath = group.getAttribute('data-dir-path');
                if (dirPath !== dirFilter) {
                    show = false;
                }
            }
            
            // 应用操作过滤
            if (operationFilter && show) {
                const operation = row.querySelector('td:nth-child(3) .badge').textContent.trim();
                if (operation !== operationFilter) {
                    show = false;
                }
            }
            
            // 应用方向过滤
            if (directionFilter && show) {
                const direction = row.querySelector('td:nth-child(4) .badge').textContent.trim();
                const directionValue = direction === '上传' ? 'local_to_server' : 'server_to_local';
                if (directionValue !== directionFilter) {
                    show = false;
                }
            }
            
            // 应用文件名过滤
            if (fileFilter && show) {
                const filename = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                const path = row.querySelector('td:nth-child(5)').textContent.toLowerCase();
                if (!filename.includes(fileFilter) && !path.includes(fileFilter)) {
                    show = false;
                }
            }
            
            // 显示或隐藏行
            row.style.display = show ? '' : 'none';
            
            // 如果行可见，则组也可见
            if (show) {
                groupVisible = true;
            }
        });
        
        // 显示或隐藏整个组
        group.style.display = groupVisible ? '' : 'none';
    });
    
    // 检查是否有可见的记录
    const visibleGroups = document.querySelectorAll('.history-group[style=""]');
    if (visibleGroups.length === 0) {
        const emptyState = document.querySelector('.empty-state');
        if (!emptyState) {
            const cardBody = document.querySelector('.card-body');
            const emptyStateDiv = document.createElement('div');
            emptyStateDiv.className = 'empty-state';
            emptyStateDiv.innerHTML = `
                <div class="empty-icon">
                    <i class="bi bi-search"></i>
                </div>
                <h3>没有匹配的记录</h3>
                <p>请尝试使用其他筛选条件。</p>
            `;
            cardBody.appendChild(emptyStateDiv);
        }
    } else {
        const emptyState = document.querySelector('.empty-state');
        if (emptyState) {
            emptyState.remove();
        }
    }
}
</script>

<style>
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filter-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-controls .form-select,
.filter-controls .form-control {
    min-width: 100px;
    max-width: 150px;
    height: 31px;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.filter-controls .btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    height: 31px;
    font-size: 0.875rem;
    min-width: 80px;
    justify-content: center;
}

.filter-controls .btn i {
    font-size: 0.875rem;
    margin-right: 2px;
}

@media (max-width: 768px) {
    .filter-controls {
        flex-wrap: wrap;
    }
    
    .filter-controls .form-select,
    .filter-controls .form-control {
        width: 100%;
        max-width: none;
    }
}

.empty-state {
    text-align: center;
    padding: 2rem;
}

.empty-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.history-group {
    margin-bottom: 2rem;
}

.history-group-header {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.truncate-text {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    font-size: 0.8rem;
    padding: 0.4em 0.6em;
}
</style>
{% endblock %} 